<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsx小练习</title>
</head>
<body>
<div id="test"></div>

<!--引入react核心库-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
        一定要注意区分:js语句(代码)与js表达式
            1、表达式：一个表达式会产生一个值，额可以放在任何一个需要值的地方
                下面这些都是表达式：
                    ①、a
                    ②、a+b
                    ③、demo(1)
                    ④、arr.map()
                    ⑤、function test(){}

            2、语句(代码)
                下面这些都是语句(代码)：
                    ①、if(){}
                    ②、for(){}
                    ③、switch(){case:xxx}
     */

    // 模拟一些数据
    const data = ['Angular', 'React', 'Vue'];
    const obj = {'name1': 'Angular', 'name2': 'React', 'name3': 'Vue'};
    // 1、创建虚拟DOM
    const VDOM = (
        <div>
            <h1>前端JS框架系列</h1>
            <ul>
                {
                    data.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    );

    // 2、渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>